<template>
  <div class="content">
    <div class="selectNum">
      <p class="title">爱豆豆数量</p>
      <div class="numBox">
        <div class="cont" v-for="(item,index) in selectList" :key="index">
          <p
            v-if="!item.isInput"
            @click="selectClick(item)"
            :class="item.isOn ? 'onP' : ''"
          >{{item.value}}</p>
          <input
            v-else
            v-model="item.value"
            @click="selectClick(item)"
            type="digit"
            placeholder="其他数额"
            @input="inputVal"
          />
        </div>
      </div>
    </div>
    <p class="showMoney">
      需支付金额&nbsp;
      <span>{{payMoney}}</span>&nbsp;元
    </p>
    <p class="hint">备注：1元=100爱豆豆，爱豆豆充值手续费为10%</p>
    <button class="btn" @click="handleCharge">确定</button>
  </div>
</template>

<script>
import {} from '@/utils'
import { CHARGE_PENSION, FIND_USER_OPEN_ID } from '@/api'
import { Base64 } from 'js-base64'

export default {
  components: {},
  props: {},
  data () {
    return {
      orderNum: '',
      openId: '',
      selectList: [
        {
          value: '2000',
          key: '2000',
          isInput: false,
          isOn: true
        },
        {
          value: '5000',
          key: '5000',
          isInput: false,
          isOn: false
        },
        {
          value: '10000',
          key: '10000',
          isInput: false,
          isOn: false
        },
        {
          value: '',
          key: 'input',
          isInput: true,
          isOn: false
        }
      ],
      payMoney: '22.00'
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    }
  },
  watch: {
    payMoney: {
      handler: function (val, oldVal) {
        console.log(val)
      },
      deep: true
    }
  },
  created () {},
  mounted () {},
  onShow () {
    this.getwxCode()
  },
  methods: {
    selectClick (item) {
      const vm = this
      vm.selectList.forEach(_ => {
        _.isOn = false
      })
      item.isOn = true
      vm.selectList.forEach(_ => {
        if (_.isOn) {
          let value = _.value * 1
          let rate = _.value * 0.1
          let sum = ((value + rate) * 0.01).toFixed(2)
          vm.payMoney = `${sum}`
        }
      })
    },
    inputVal (e) {
      const vm = this
      let value = e.target.value * 1
      let rate = value * 0.1
      let sum = ((value + rate) * 0.01).toFixed(2)
      vm.payMoney = `${sum}`
    },
    handleCharge () {
      const vm = this
      vm.chargePension()
    },
    chargePension () {
      const vm = this
      console.log(vm.account)
      let params = {
        amount: vm.payMoney * 1,
        providerId: vm.account.providerId,
        relateMan: vm.account.shopId,
        storeIdentityEnum: 'SHOP',
        openId: vm.openId,
        payMerId: vm.$store.state.payMerId,
        payMethodEnum: 'MINI', // 之前是改了的WECHAT
        paySourceEnum: 'H5', // 之前是改了的MINI
        phone: vm.account.cellphone // 21091125 加了个手机号
      }
      CHARGE_PENSION(params)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data && r.data.data.data) {
              let payInfo = Base64.decode(r.data.data.data)
              vm._callWechatPay(JSON.parse(payInfo))
            }
          } else if (r.data.message === '未找到云账户信息') {
            vm
              .$alert(
                '您暂未开通云账户，请到爱卡卡开店宝pc端管理系统登录开通。详情请咨询400-888-5115'
              )
              .then(r => {
                vm.$router.go(-1)
              })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {})
    },
    getwxCode () {
      const vm = this
      wx.login({
        timeout: 6000,
        success: function (res) {
          vm._getWxCode(res.code)
        },
        fail: function (err) {
          console.error(err)
        }
      })
    },
    _getWxCode (code) {
      const vm = this
      let appId = vm.$store.state.appId
      let appSecret = Base64.decode(vm.$store.state.appSecret)
      FIND_USER_OPEN_ID(appId, appSecret, code)
        .then(r => {
          if (r.data.code === '0') {
            vm.openId = r.data.data
          } else {
            this.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    _callWechatPay (payInfo) {
      const vm = this

      console.log(payInfo)

      wx.requestPayment({
        ...payInfo,
        success: function (res) {
          vm.$alert('支付成功', '').then(() => {
            vm.$router.go(-1)
          })
        },
        fail: function (err) {
          console.log(err)
          if (err.errMsg === 'requestPayment:fail cancel') {
          } else {
            vm.$toast('支付失败')
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  width: 95%;
  margin: auto;
  > .selectNum {
    color: #000;
    display: flex;
    align-items: center;
    > .title {
      font-size: 13px;
      margin-right: 10px;
      line-height: 70px;
    }
    > .numBox {
      display: flex;
      align-items: center;
      > .cont {
        margin-right: 10px;
        p {
          padding: 1px 6px;
        }
        > .onP {
          padding: 1px 6px;
          background: $new-dark-blue;
          border-radius: 25px;
          color: #fff;
        }
        > input {
          font-size: 13px;
          width: 65px;
          padding-left: 8px;
          border-radius: 25px;
          border: 1px solid $dark-gray;
        }
      }
    }
  }
  > .showMoney {
    font-size: 13px;
    color: #8c92a4;
    line-height: 45px;
    span {
      color: $new-dark-blue;
    }
  }
  > .hint {
    font-size: 13px;
    color: #8c92a4;
  }
  > .btn {
    margin-top: 20px;
    background: $new-dark-blue;
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: #fff;
  }
}
</style>
